import React, { useState } from 'react';
import { Table, Form, Button, Modal } from 'react-bootstrap';

const EditableTimeTable = ({ onSave }) => {
  const weekdays = ['周一', '周二', '周三', '周四', '周五'];
  const timeSlots = [
    { slot: 1, time: '1-2节 8:30-10:10' },
    { slot: 3, time: '3-4节 10:30-12:10' },
    { slot: 5, time: '5-6节 14:00-15:40' },
    { slot: 7, time: '7-8节 16:00-17:40' },
    { slot: 9, time: '9-10节 19:00-20:40' }
  ];
  
  const [schedule, setSchedule] = useState(() => {
    const initialSchedule = {};
    weekdays.forEach(day => {
      initialSchedule[day] = {};
      timeSlots.forEach(({ slot }) => {
        initialSchedule[day][slot] = '';
      });
    });
    return initialSchedule;
  });

  const [showModal, setShowModal] = useState(false);
  const [selectedCell, setSelectedCell] = useState({ day: '', slot: '' });
  const [courseName, setCourseName] = useState('');

  const handleCellClick = (day, slot) => {
    setSelectedCell({ day, slot });
    setCourseName(schedule[day][slot] || '');
    setShowModal(true);
  };

  const handleSave = () => {
    const newSchedule = { ...schedule };
    newSchedule[selectedCell.day][selectedCell.slot] = courseName;
    setSchedule(newSchedule);
    setShowModal(false);
    if (onSave) {
      onSave(newSchedule);
    }
  };

  return (
    <>
      <div className="table-responsive">
        <Table 
          bordered 
          className="text-center" 
          style={{ 
            width: '100%',
            maxWidth: '1000px',
            margin: '0 auto',
            tableLayout: 'fixed'
          }}
        >
          <thead>
            <tr>
              <th style={{ width: '160px' }}>时间</th>
              {weekdays.map(day => (
                <th key={day} style={{ width: 'calc((100% - 160px) / 5)' }}>{day}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {timeSlots.map(({ slot, time }) => (
              <tr key={slot}>
                <td style={{ fontSize: '0.8rem', whiteSpace: 'pre-line' }}>
                  {time}
                </td>
                {weekdays.map(day => (
                  <td
                    key={`${day}-${slot}`}
                    onClick={() => handleCellClick(day, slot)}
                    style={{ 
                      cursor: 'pointer', 
                      height: '80px',
                      padding: '4px',
                      fontSize: '0.75rem',
                      wordBreak: 'break-word',
                      backgroundColor: schedule[day][slot] ? '#f8f9fa' : 'white'
                    }}
                  >
                    {schedule[day][slot] || '点击添加课程'}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </Table>
      </div>

      <Modal show={showModal} onHide={() => setShowModal(false)}>
        <Modal.Header closeButton>
          <Modal.Title>编辑课程</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form>
            <Form.Group>
              <Form.Label>课程名称</Form.Label>
              <Form.Control
                type="text"
                placeholder="请输入课程名称"
                value={courseName}
                onChange={(e) => setCourseName(e.target.value)}
              />
            </Form.Group>
          </Form>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={() => setShowModal(false)}>
            取消
          </Button>
          <Button variant="primary" onClick={handleSave}>
            保存
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

export default EditableTimeTable; 